<template>
    <div>
        <!-- <div>广告管理</div> -->
        <div class="serach">
            <el-input placeholder="请输入内容" v-model="title" clearable class="input1">
            </el-input>
            <el-input placeholder="请输入内容" v-model="content" clearable class="input2"></el-input>
            <el-button type="primary" @click="search"><i class="el-icon-search"></i>查找</el-button>
            <el-button type="primary" @click="addfun"><i class="el-icon-plus"></i>添加</el-button>
            <el-button type="primary" @click="exportToExcel"><i class="el-icon-upload2"></i>导出</el-button>
        </div>
        <div class="table">
            <el-table :data="tableData" highlight-current-row style="width: 100%" border
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column prop="id" label="广告ID" sortable width="180" align="center">
                </el-table-column>
                <el-table-column prop="name" label="广告标题" width="180" align="center">
                </el-table-column>
                <el-table-column prop="content" label="广告内容" align="center">
                </el-table-column>
                <el-table-column prop="url" label="广告图片" align="center">
                    <template #default="scope">
                        <img :src="scope.row.url" alt="广告图片" style="width: 80px; height: 40px" />
                    </template>
                </el-table-column>
                <el-table-column prop="position" label="广告位置" align="center">
                </el-table-column>
                <el-table-column prop="link" label="活动连接" align="center">
                </el-table-column>
                <el-table-column prop="enabled" label="标签" width="100" align="center" :filters="[
                    { text: '启用', value: true },
                    { text: '不启用', value: false },
                ]" :filter-method="filterTag" filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.enabled === '启用' ? 'success' : 'error'" disable-transitions>{{
                            scope.row.enabled
                            }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="solt">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="add">
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="广告标题" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="广告内容" :label-width="formLabelWidth">
                        <el-input v-model="form.content" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="广告图片" :label-width="formLabelWidth">
                        <el-upload class="avatar-uploader" action="/api/admin/storage/create" :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img v-if="form.url" :src="form.url" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="广告位置" :label-width="formLabelWidth">
                        <el-select v-model="form.position" placeholder="请选择广告位置">
                            <el-option label="首页" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动连接" :label-width="formLabelWidth">
                        <el-input v-model="form.link" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" :label-width="formLabelWidth">
                        <el-select v-model="form.enabled" placeholder="请选择">
                            <el-option label="启用" :value="true"></el-option>
                            <el-option label="未启用" :value="false"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="determinefun">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import * as XLSX from "xlsx";
import {
    guanggaodelete,
    guanggaogetdata,
    guanggaoadd,
    guanggaoedit,
} from "@/api/tggl/gggl";
export default {
    data() {
        return {
            flag: 1,
            // 添加
            dialogFormVisible: false,
            form: {
                name: "",
                content: "",
                position: "",
                url: "",
                link: "",
                enabled: null,
            },
            formLabelWidth: "120px",
            // 输入框
            title: "",
            content: "",
            tableData: [],
            // 分页
            total: null,
            size: 20,
            page: 1,
        };
    },
    created() {
        this.getdata();
    },
    methods: {
        // 添加确定
        determinefun() {
            if (this.flag === 1) {
                this.dialogFormVisible = false;
                guanggaoadd({ ...this.form })
                    .then((res) => {
                        console.log(res);
                        if (res.errno === 0) {
                            this.$message.success("添加成功！");
                            this.getdata();
                        } else {
                            this.$message.error("添加失败！");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else {
                this.dialogFormVisible = false;
                guanggaoedit({
                    ...this.form,
                    enabled: this.form.enabled == "启用" ? true : false,
                }).then((res) => {
                    if (res.errno === 0) {
                        this.$message.success("更新成功！");
                        this.getdata();
                    } else {
                        this.$message.error("编辑失败！");
                    }
                });
            }
        },
        // 图片上传限制
        handleAvatarSuccess(res, file) {
            console.log(res, file);
            this.form.url = URL.createObjectURL(file.raw);
            this.form.url = res.data.url;
        },
        // 添加
        addfun() {
            this.form = {
                name: "",
                content: "",
                position: "",
                url: "",
                link: "",
                enabled: null,
            };
            this.dialogFormVisible = true;
            this.flag = 1;
        },
        // 导出
        exportToExcel() {
            console.log("导出");
            //  自定义表头
            const headers = [
                "广告ID",
                "广告标题",
                "广告内容",
                "广告图片",
                "广告位置",
                "活动链接",
                "是否启用",
            ];
            // 自定义数据
            const data = this.tableData.map((item) => [
                item.id,
                item.name,
                item.content,
                item.url,
                item.position,
                item.link,
                item.enabled,
            ]);
            // 将表头和数据合并
            const worksheetData = [headers, ...data];
            // 将表头转换为工作表
            const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
            // 创建工作薄并导出
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
            XLSX.writeFile(workbook, "广告信息.xlsx");
        },
        // 查找
        search() {
            this.getdata();
        },
        // 获取初始数据
        getdata() {
            guanggaogetdata({
                page: this.page,
                limit: this.size,
                name: this.title,
                content: this.content,
                sort: "add_time",
                order: "desc",
            })
                .then((res) => {
                    console.log(res);
                    if (res.errno === 0) {
                        this.tableData = res.data.list.map((item) => ({
                            ...item,
                            enabled: item.enabled ? "启用" : "不启用",
                        }));
                        this.total = res.data.total;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        formatter(row, column) {
            return row.address;
        },
        // 表格操作
        handleEdit(index, row) {
            console.log(index, row);
            this.form = {
                name: "",
                content: "",
                position: "",
                url: "",
                link: "",
                enabled: null,
            };
            this.flag = 2;
            this.dialogFormVisible = true;
            this.form = row;
            console.log(row);
        },
        handleDelete(index, row) {
            console.log(index, row);
            const obj = {
                ...row,
                enabled: row.enabled === "启用",
            };
            console.log(obj);
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    guanggaodelete({ ...obj })
                        .then((res) => {
                            console.log(res);
                            if (res.errno === 0) {
                                this.$message.success("删除成功！");
                                this.getdata();
                            } else {
                                this.$message.error("删除失败！");
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 表格标签
        filterTag(value, row) {
            return row.tag === value;
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.size = val;
            this.getdata();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getdata();
        },
    },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.serach {
    margin-top: 20px;
}

.input1 {
    margin-left: 20px;
    margin-right: 20px;
    width: 350px;
    height: 40px;
}

.input2 {
    margin-right: 20px;
    width: 350px;
    height: 40px;
}

.table {
    margin-left: 20px;
    margin-top: 20px;
}

.solt {
    margin-top: 20px;
}
</style>
